<template>
  <div>
    <!-- 建党百年图片部分 -->
    <div class="dang">
      <img src="./image/header.png" style="width: 100%" alt="" />
    </div>
    <!-- 头部区域制作 -->
    <div class="header">
      <div class="w">
        <!-- 头部左侧部分 -->
        <div class="header_le">
          <ul>
            <li>
              <a href="index.html">小米商城</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">MIUI</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">loT</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">云服务</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">天星数科</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">有品</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">小爱开放平台</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">企业团购</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">资质证照</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">协议规则</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">下载APP</a>
              <span>|</span>
            </li>
            <li>
              <a href="#">智能生活</a>
              <span>|</span>
            </li>
            <li><a href="#">Select Location</a></li>
          </ul>
        </div>
        <!-- 头部右侧部分 -->
        <div class="header_ri">
          <div class="enter">
            <ul>
              <li>
                <a href="#" onclick="alert('正在开发ing')">登录</a>
                <span>|</span>
              </li>
              <li>
                <a href="register.html">注册</a>
                <span>|</span>
              </li>
              <li>
                <a href="#">消息通知</a>
              </li>
            </ul>
          </div>
          <!-- 购物车部分 -->
          <div class="shopcar">
            <span></span>
            购物车<em>(0)</em>
            <!-- 购物车下拉部分 -->
            <div class="shopcar_detail">
              <p>购物车中还没有任何商品，赶紧选购吧</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏部分制作 -->
    <div class="nav w">
      <!-- logo部分 -->
      <div class="logo">
        <h1><a href="index.html" title="小米官网">小米官网</a></h1>
      </div>
      <div class="nav_mi">
        <ul>
          <li><a href="#">小米手机</a></li>
          <li><a href="#">Redmi红米</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">智能硬件</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" class="search_1" placeholder="家电" />
        <button class="search_2"></button>
      </div>
    </div>
    <!-- 轮播图区域制作 -->
    <div class="banner">
      <div class="banxin w">
        <!-- 轮播图导航栏制作 -->
        <div class="banner_nav">
          <ul>
            <li class="nav_detail1">
              <a href="#" class="banner_nav1">手机 电话卡</a>
              <div class="detail_1">
                <ul class="detail_goods">
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone1.webp" alt="" />小米10</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone2.webp" alt="" />Note 10 Pro</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone3.webp" alt="" />Redmi K30S
                      至尊纪念版</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone4.webp" alt="" />Redmi Note9 4G</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone5.webp" alt="" />小米10S</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone6.webp" alt="" />小米 11 Ultra</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone7.webp" alt="" />Redmi K30
                      至尊纪念版</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone8.webp" alt="" />Redmi Note8 Pro
                    </a>
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/phone9.webp" alt="" />Redmi K40</a
                    >
                  </li>
                </ul>
              </div>
            </li>
            <li class="nav_detail2">
              <a href="#" class="banner_nav1">电视 盒子</a>
              <div class="detail_2">
                <ul class="detail_goods">
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv1.webp" alt="" />Redmi MAX 86
                      超大屏</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv2.webp" alt="" />Redmi 智能电视
                      X系列</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv3.webp" alt="" />小米透明电视
                    </a>
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv4.webp" alt="" />小米电视大师82英寸
                    </a>
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv5.webp" alt="" />大师电视65英寸</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv6.webp" alt="" />Rdemi 智能电视
                      MAX</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv7.webp" alt="" />小米电视5 Pro 55英寸
                    </a>
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv8.webp" alt="" />小米电视5 Pro 65英寸
                    </a>
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv9.webp" alt="" />小米电视5 Pro
                      75英寸</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv10.webp" alt="" />小米电视5 75英寸</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv11.webp" alt="" />小米电视5 65英寸</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv12.webp" alt="" />金属全面屏电视</a
                    >
                  </li>
                  <li>
                    <a href="" class="detail_goods1"
                      ><img src="./image/tv13.webp" alt="" />小米全面屏电视</a
                    >
                  </li>
                </ul>
              </div>
            </li>
            <!-- <li class="nav_detail3"><a href="#" class="banner_nav1">笔记本 显示器</a>
                        <div class="detail_3">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/labtop1.webp" alt="">RedmiBook Pro
                                        14</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop2.webp" alt="">RedmiBook Pro
                                        15
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop3.webp" alt="">RedmiBook Pro
                                        16
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop4.webp" alt="">Redmi G 游戏本
                                        4G</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop5.webp" alt="">小米笔记本 Pro
                                        15</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop6.webp" alt="">RedmiBook Air
                                        13
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop7.webp" alt="">RedmiBook 16
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop8.webp" alt="">小米笔记本 Pro
                                        14
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/labtop9.webp" alt="">RedmiBook
                                        13</a>
                                </li>
                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail4"><a href="#" class="banner_nav1">家电 插线板</a>
                        <div class="detail_4">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp1.webp" alt="">冰箱</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp2.webp" alt="">微波炉
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp3.webp" alt="">电磁炉
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp4.webp" alt="">插线板
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp5.webp" alt="">立式空调</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp6.webp" alt="">电烤箱
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp7.webp" alt="">电水壶
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/homeapp8.webp" alt="">新风机
                                    </a></li>

                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail5"><a href="#" class="banner_nav1">出行 穿戴</a>
                        <div class="detail_5">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/walk1.webp" alt="">小米手环6</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk2.webp" alt="">平衡车</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk3.webp" alt="">滑板车
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk4.webp" alt="">自行车
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk5.webp" alt="">车载充电器</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk6.webp" alt="">智能后视镜</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/walk7.webp" alt="">智能记录仪
                                    </a></li>
                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail6"><a href="#" class="banner_nav1">智能 路由器</a>
                        <div class="detail_6">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/AI1.webp" alt="">打印机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI2.webp" alt="">摄像机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI3.webp" alt="">小爱音响
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI4.webp" alt="">喷墨打印机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI5.webp" alt="">照相机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI6.webp" alt="">智能门锁</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI7.webp" alt="">小米路由器
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI8.webp" alt="">R视频门铃
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/AI9.webp" alt="">小爱老师</a>
                                </li>
                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail7"><a href="#" class="banner_nav1">电源 配件</a>
                        <div class="detail_7">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/power1.webp" alt="">移动电源</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/power2.webp" alt="">手机壳</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/power3.webp" alt="">数据线
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/power4.webp" alt="">Redmi
                                        Note9
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/power5.webp" alt="">车充</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/power6.webp" alt="">无线充电器</a>
                                </li>
                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail8"><a href="#" class="banner_nav1">健康 儿童</a>
                        <div class="detail_8">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/health1.webp" alt="">洗手机</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/health2.webp" alt="">体脂称
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/health3.webp" alt="">走步机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/health4.webp" alt="">剃须刀
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/health5.webp" alt="">早教启智</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/health6.webp" alt="">修剪器
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/health7.webp" alt="">益智积木
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/health8.webp" alt="">牙刷

                                    </a></li>

                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail9"><a href="#" class="banner_nav1">耳机 音响</a>
                        <div class="detail_9">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/erji1.webp" alt="">Redmi
                                        AirDots
                                        3</a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji2.webp" alt="">小米小爱触屏音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji3.webp" alt="">品牌耳机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji4.webp" alt="">小爱音箱
                                        Art 电池版
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji5.webp" alt="">Redmi
                                        音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji6.webp" alt="">蓝牙音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/erji7.webp" alt="">小米AI
                                        音箱
                                    </a></li>
                            </ul>
                        </div>
                    </li> -->
            <!-- <li class="nav_detail10"><a href="#" class="banner_nav1">生活 箱包</a>
                        <div class="detail_10">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="./image/bag1.webp" alt="">小背包</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag2.webp" alt="">床垫</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag3.webp" alt="">米兔
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag4.webp" alt="">双肩包
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag5.webp" alt="">枕头</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag6.webp" alt="">笔</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag7.webp" alt="">胸包
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag8.webp" alt="">螺丝刀
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="./image/bag9.webp" alt="">旅行箱</a>
                                </li>
                            </ul>
                        </div>
                    </li> -->
          </ul>
        </div>

        <div class="banner_pic w">
          <ul>
            <li><img src="./image/lbt1.webp" alt="" /></li>
            <li><img src="./image/lbt2.webp" alt="" /></li>
            <li><img src="./image/lbt3.webp" alt="" /></li>
            <li><img src="./image/lbt4.webp" alt="" /></li>
          </ul>

          
          <ol class="circle"></ol>
          <!-- 轮播图箭头部分 -->
          <div class="banner_ri">
            <div class="arrow_le"><a href="javascrpit:;" class="le"></a></div>
            <div class="arrow_ri"><a href="javascrpit:;" class="ri"></a></div>
          </div>


          







        </div>
      </div>
    </div>
    <!-- 推荐模块制作 -->
    <div class="column w">
      <!-- 左侧模块部分 -->
      <div class="column_1">
        <ul>
          <li>
            <a href="#" class="recommend">小米秒杀</a>
          </li>
          <li><a href="#" class="team">企业团购</a></li>
          <li><a href="#" class="passage">F码通道</a></li>
          <li><a href="#" class="card">米粉卡</a></li>
          <li><a href="#" class="new">以旧换新</a></li>
          <li><a href="#" class="bill">话费充值</a></li>
        </ul>
      </div>
      <!-- 右侧图片部分 -->
      <div class="column_2">
        <ul>
          <li><a href="#" class="mi1"></a></li>
          <li><a href="#" class="mi2"></a></li>
          <li><a href="#" class="mi3"></a></li>
        </ul>
      </div>
    </div>
    <!-- 侧边栏部分制作 -->
    <div class="aside">
      <ul>
        <li>
          <a href="javascript:;" class="aside_shoujiapp">
            <span>手机APP</span>
            <div class="aside_pic">
              <img src="./image/QQ二维码.png" alt="" />
              <p>微信扫一扫</p>
            </div>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="aside_seckill">
            <span>小米秒杀</span>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="aside_phone">
            <span>手机</span>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="aside_homeapp">
            <span>家电</span>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="aside_smart">
            <span>智能</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 楼层模块制作 -->
    <div class="floor">
      <!-- 小米秒杀模块制作 -->
      <div class="seckill w t">
        <!-- 小米秒杀导航栏部分 -->
        <div class="seckill_nav">
          <h2>小米秒杀</h2>
          <div class="swiper">
            <span class="swiper_prev"></span>
            <span class="swiper_next"></span>
          </div>
        </div>
        <!-- 小米秒杀商品部分 -->
        <div class="seckill_goods">
          <!-- 第一个图块 -->
          <div class="seckill_news">
            <h2>22:00场</h2>
            <img src="./image/下载.jpg" alt="" />
            <p>当前时间</p>
            <div>
              <span id="d">00</span>
              <i>:</i>
              <span id="f">52</span>
              <i>:</i>
              <span id="c">10</span>
            </div>
          </div>
          <div class="seckill_good">
            <ul>
              <!-- 第一页盒子 -->
              <li>
                <a href="#" class="seckill_goods1">
                  <div class="goods1_pic">
                    <img src="./image/mi4.webp" alt="" />
                  </div>
                  <h3>LUCKYMELIFE百变随心搭配多种样式</h3>
                  <p class="meet">遇见LUCKYMELIFE，遇见你</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods2">
                  <div class="goods1_pic">
                    <img src="./image/mi5.webp" alt="" />
                  </div>
                  <h3>小米路由器11 新款上市</h3>
                  <p class="meet">网络更加通畅</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi6.webp" alt="" />
                  </div>
                  <h3>小米行李箱</h3>
                  <p class="meet">出行更便捷</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods4">
                  <div class="goods4_pic">
                    <img src="./image/mi7.webp" alt="" />
                  </div>
                  <h3>小米自拍杆</h3>
                  <p class="meet">拍出最美的你</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi8.webp" alt="" />
                  </div>
                  <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                  <p class="meet">8H释压舒弹纤维枕 抗菌对装</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <!-- 第二页盒子 -->
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi9.webp" alt="" />
                  </div>
                  <h3>木星黎明系列积木 静态积木搭建</h3>
                  <p class="meet">大扭矩电机，真彩灯模块</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi11.webp" alt="" />
                  </div>
                  <h3>小米智能门锁</h3>
                  <p class="meet">安全防护您的安全</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi12.webp" alt="" />
                  </div>
                  <h3>赫特变频擦窗机器人DDC55 白色</h3>
                  <p class="meet">干湿两擦不打滑</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi13.webp" alt="" />
                  </div>
                  <h3>米兔儿童滑板车 粉色</h3>
                  <p class="meet">安全好玩的酷玩具</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <!-- 第三页盒子 -->
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi14.webp" alt="" />
                  </div>
                  <h3>智能滑板车 无线型全新上市</h3>
                  <p class="meet">更多助力选择 更多城市风景</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi15.webp" alt="" />
                  </div>
                  <h3>日常元素抽纸青春版</h3>
                  <p class="meet">精选原生竹浆</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
              <li>
                <a href="#" class="seckill_goods3">
                  <div class="goods3_pic">
                    <img src="./image/mi16.webp" alt="" />
                  </div>
                  <h3>小米背包全新上市 电脑包</h3>
                  <p class="meet">出行更加便捷</p>
                  <p class="price">521元</p>
                  <del>1314元</del>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 广告新闻条1 -->
      <div class="news_1 w">
        <a href="#"> <img src="./image/news1.webp" alt="" /></a>
      </div>
      <!-- 手机模块制作 -->
      <div class="phone w t">
        <!-- 手机导航条 -->
        <div class="phone_nav">
          <h2>大家电</h2>
          <p>查看更多</p>
        </div>
        <!-- 手机商品 -->
        <div class="phone_goods">
          <div class="phone_goods_le">
            <a href=""><img src="./image/shouji1.webp" alt="" /></a>
          </div>
          <div class="phone_goods_ri">
            <ul>






                <template v-for="(item,i) in indexlist">
                    <li  :key="i" v-if="i<=7" >
                      
                        <!-- <a href="#" class="shouji_goods1"  target="_blank" > -->
                          
                         <router-link :to="'/Product/' + item.goods_id" class="shouji_goods1"> 
                         
                        <div class="goods1_pic">
                            <el-image :src="uploadURL + item.goods_big_logo"></el-image>
                        </div>
                        <h3>{{ item.goods_name }}</h3>
                        <p class="meet">{{ item.goods_introduce }}</p>
                        <p class="price">{{ item.goods_price }}元</p>
                        <!-- </a> -->
                        </router-link>
                       


                    </li>
                </template>
             




            </ul>
          </div>
        </div>
      </div>
      <!-- 广告新闻条2 -->
      <div class="news_2 w">
        <a href="#"> <img src="./image/news2.webp" alt="" /></a>
      </div>
      <!-- 家电模块制作 -->
      <div class="homeapp w t">
        <div class="homeapp_nav">
          <h2>热门推荐</h2>
          <ul>
            <li><a href="">热门</a></li>
            <li><a href="">耳机音箱</a></li>
          </ul>
        </div>
        <div class="homeapp_goods">
          <div class="homeapp_goods_le">
            <ul>
              <li>
                <a href="#"><img src="./image/jiadian1.webp" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./image/jiadian2.webp" alt="" /></a>
              </li>
            </ul>
          </div>
          <div class="homeapp_goods_ri">
            <ul>


               
            

            <template v-for="(item,i) in indexrmtj">
                <li class="bigbox" :key="i" v-if="i<=6">
                <!-- <a href="product.vue" class="homeapp_goods1"> -->

                  <router-link :to="'/Product/' + item.goods_id" class="homeapp_goods1">

                  <div class="goods1_pic">
                    <el-image :src="uploadURL + item.goods_big_logo"></el-image>
                  </div>
                  <h3>{{ item.goods_name }}</h3>
                  <p class="meet">{{ item.goods_introduce }}</p>
                  <p class="price">{{ item.goods_price }}元</p>
                <!-- </a> -->
                </router-link>
              </li>

              <li class="smallbox" v-else-if="i==7" :key="i">
                <!-- <a href="product.vue"> -->
                <router-link :to="'/Product/' + item.goods_id" >
                  <h3>{{ item.goods_name }}</h3>
                  <p>{{ item.goods_price }}元</p>
                  <div class="goods2_pic">
                    <el-image :src="uploadURL + item.goods_big_logo"></el-image>
                  </div>
                <!-- </a> -->
                </router-link>
              </li>



            </template>



              
              <li class="smallbox_more">
                <a href="">
                  <h3>浏览更多</h3>
                  <p>热门</p>
                  <i></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 广告新闻条3 -->
      <div class="news_3 w">
        <a href="#"> <img src="./image/news3.webp" alt="" /></a>
      </div>
      <!-- 智能模块制作 -->
      <div class="smart w t">
        <div class="smart_nav">
          <h2>海外购</h2>
          <ul>
            <li><a href="">热门</a></li>
            <li><a href="">安防</a></li>
            <li><a href="">出行</a></li>
          </ul>
        </div>
        <div class="smart_goods">
          <div class="smart_goods_le">
            <ul>
              <li>
                <a href="#"><img src="./image/smart1.webp" alt="" /></a>
              </li>
              <li>
                <a href="#"><img src="./image/smart2.webp" alt="" /></a>
              </li>
            </ul>
          </div>
          <div class="smart_goods_ri">
            <ul>



             <template v-for="(item,i) in indexhwg">

              <li class="bigbox" :key="i" v-if="i<=6">

                <!-- <a href="product.vue" class="smart_goods1"> -->

                  <router-link :to="'/Product/' + item.goods_id" class="smart_goods1">
                  <div class="goods1_pic">
                    <el-image :src="uploadURL + item.goods_big_logo"></el-image>
                  </div>
                  <h3>{{ item.goods_name }}</h3>
                  <p class="meet">{{ item.goods_introduce }}</p>
                  <p class="price">{{ item.goods_price }}元</p>
                  <!-- <del>1314元</del> -->
                <!-- </a> -->
                  </router-link>
              </li>
             

             
              <li class="smallbox" v-else-if="i==7" :key="i">
                <!-- <a href="product.vue"> -->
                  <router-link :to="'/Product/' + item.goods_id" >
                  <h3>{{ item.goods_name }}</h3>
                  <p>{{ item.goods_price }}元</p>
                  <div class="goods2_pic">
                   <el-image :src="uploadURL + item.goods_big_logo"></el-image>
                  </div>
                <!-- </a> -->
                  </router-link>
              </li>

             </template>



              <li class="smallbox_more">
                <a href="">
                  <h3>浏览更多</h3>
                  <p>热门</p>
                  <i></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 广告新闻条4 -->
      <div class="news_4 w">
        <a href="#"> <img src="./image/news4.webp" alt="" /></a>
      </div>
    </div>
    <!-- 尾部区域制作 -->
    <div class="footer w">
      <!-- 尾部区域服务部分 -->
      <div class="serve">
        <ul>
          <li><a href="#" class="serve_1">预约维修服务</a></li>
          <li><a href="#" class="serve_2">7天无理由退货</a></li>
          <li><a href="#" class="serve_3">15天免费换货</a></li>
          <li><a href="#" class="serve_4">满69包邮</a></li>
          <li><a href="#" class="serve_5">520余家售后网店</a></li>
        </ul>
      </div>
      <!-- 尾部区域指南部分 -->
      <div class="guild">
        <!-- 尾部区域指南左侧部分 -->
        <div class="guild_le">
          <dl>
            <dt>帮助中心</dt>
            <dd><a href="">账户管理</a></dd>
            <dd><a href="">购物指南</a></dd>
            <dd><a href="">订单操作</a></dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd><a href="">售后政策</a></dd>
            <dd><a href="">自助服务</a></dd>
            <dd><a href="">相关下载</a></dd>
          </dl>
          <dl>
            <dt>线下门店</dt>
            <dd><a href="">小米之家</a></dd>
            <dd><a href="">服务网点</a></dd>
            <dd><a href="">授权体验店</a></dd>
          </dl>
          <dl>
            <dt>关于小米</dt>
            <dd><a href="">了解小米</a></dd>
            <dd><a href="">加入小米</a></dd>
            <dd><a href="">投资者关系</a></dd>
            <dd><a href="">企业社会责任</a></dd>
            <dd><a href="">廉洁举报</a></dd>
          </dl>
          <dl>
            <dt>关注我们</dt>
            <dd><a href="">新浪微博</a></dd>
            <dd><a href="">官方微信</a></dd>
            <dd><a href="">联系我们</a></dd>
            <dd><a href="">公益基金会</a></dd>
          </dl>
          <dl>
            <dt>特色服务</dt>
            <dd><a href="">F码通道</a></dd>
            <dd><a href="">礼物码</a></dd>
            <dd><a href="">防伪查询</a></dd>
          </dl>
        </div>
        <!-- 尾部区域指南右侧部分 -->
        <div class="guild_ri">
          <h2>400-100-5678</h2>
          <p class="time">8:00-18:00(仅收市话费)</p>
          <a href="" class="customer">人工客服</a>
          <p class="view">
            关注小米：
            <a href="" class="qq"></a>
            <a href="" class="fire"></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //获取大家电
      indexlist: {},
      //获取热门推荐
      indexrmtj:{},
      //海外购
      indexhwg:{},
      uploadURL: "http://localhost:60956/",

    };
  },
  methods: {
    //查询商品
    async getOrderList() {
      const { data: res } = await this.$http.get("index");

      if (res.meta.status !== 200) {
        return this.$message.error("获取商品失败");
      }

     

      this.indexlist=res.data.djj
      this.indexrmtj=res.data.rmtj
      this.indexhwg=res.data.hwg

      console.log(res.data);
    },
  },
  created() {
    this.getOrderList();
  },
  mounted(){
    this.$router.afterEach((to,from,next)=>{
      window.scrollTo(0,0)
    })
  }
};


</script>






<style scoped lang="less">
@import "./css/base.css";
@import "./css/common.css";
@import "./css/index_main.css";

.shouji_goods2 {
  display: none;
}
</style>